
 
// 总览页面
.container-main {
  width: 100%;
  // height: 880PX;
  height: 100%;
  // min-width: 1250PX;
  background: $--background-color-base;
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 34PX;
    text-align: center;
    font-weight: 500;
    color: #000000;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .container-left {
    float: left;
    margin-top: 20PX;
    margin-left: 20PX;
    width: 76.8%;
    height: 880PX;
    background-color: $--color-white;
    border: solid 1PX $--border-color-lighter;
  }
  .container-right {
    float: left;
    margin-top: 20PX;
    margin-left: 20PX;
    width: 20%;
    height: 880PX;
    background-color: $--color-white;
    border: solid 1PX $--border-color-lighter;
  }
  .container-left-top {
    width: 100%;
    height: 420PX;
  }
  .container-left-bottom {
    width: 100%;
    height: 400PX;
    background-color: $--color-white;
  }
  .curr-order {
    float: left;
    margin-left: 20PX;
    margin-top: 1PX;
  }
  .control-right {
    margin-top: 40PX;
    margin-left: 20PX;
  }
  .agent-div {
    float: left;
    width: 28%;
    height: 420PX;
    border-bottom: solid 0.5PX $--border-color-lighter;
  }
  .other-div {
    float: left;
    width: 24%;
    height: 210PX;
    border-left: solid 1PX $--border-color-lighter;
    border-bottom: solid 1PX $--border-color-lighter;
    .model-icon {
      width: 20PX;
      height: 20PX;
    }
  }
  .agent-icon {
    position:relative;
    float: left;
    width: 50%;
    height: 210PX;
  }
  .agent-num {
    float: left;
    width: 50%;
    height: 210PX;
  }
  .lianji-success {
    position:relative;
    float: right;
    right: 30PX;
    top: 25PX;
    text-align: center;
    width: 81PX;
    height: 34PX;
    background-color: $--color-primary;
    border-radius: 4PX;
    font-size: 14PX;
    padding:10PX 0;
    color: $--color-white;
  }
  .lianji-fail {
    position:relative;
    float: right;
    right: 30PX;
    top: 25PX;
    text-align: center;
    width: 81PX;
    height: 34PX;
    background-color: #909399;
    border-radius: 4PX;
    font-size: 14PX;
    padding:10PX 0;
    color: $--color-white;
  }
  .lianji-wait {
    position:relative;
    float: right;
    right: 30PX;
    top: 25PX;
    text-align: center;
    width: 110PX;
    height: 34PX;
    background-color: #e6a23c;
    border-radius: 4PX;
    font-size: 14PX;
    padding:10PX 0;
    color: $--color-white;
  }
  .agent-id {
    margin-top: 20PX;
    margin-right: 30PX;
    text-align: right;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0PX;
    color: $--color-text-secondary;
  }
  .agent-number {
    margin-top: 10PX;
    margin-right: 30PX;
    text-align: right;
    font-size: 16PX;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0PX;
    color: $--color-text-primary;
  }
  .agent-port {
    margin-top: 20PX;
    margin-right: 30PX;
    text-align: right;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0PX;
    color: $--color-text-secondary;
  }
  .port-number {
    margin-top: 10PX;
    margin-right: 30PX;
    text-align: right;
    font-size: 16PX;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0PX;
    color: $--color-text-primary;
  }
  .model-name {
    float: left;
    margin-top: 32PX;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0PX;
    color: $--color-text-regular;
    margin-right: 10PX;
  }
  .model-tupian {
    float: left;
    margin-top: 30PX;
    margin-left: 20PX;
    margin-right: 10PX;
  }
  .to-detail {
    float: left;
    margin-top: 35PX;
    line-height: 10PX;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0PX;
    color: $--color-primary;
    padding-left: 10PX;
    border-left: 1PX solid $--color-primary;
    cursor: pointer;
  }

  .control-center {
    // float: left;
    text-align: center;
    margin-top: 40PX;
    font-size: 30PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20PX;
    letter-spacing: 0PX;
    color: $--color-text-primary;
  }
  .curr-grade {
    margin-top: 30PX;
    font-size: 24PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    color: $--color-text-regular;
  }
  .curr-num {
    margin-top: 20PX;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    color: $--color-text-secondary;
  }
  .icon-ziyuan:before {
    content: "\e670";
    position:absolute;
    z-index:2;
    left: 45PX;
    top: 72PX;
    // color: #$--color-primary;
  }
  .yuanxing {
    position:absolute;
    left: 20PX;
    top: 50PX;
    z-index:1;
    width: 90PX;
    height: 90PX;
    // background-color: #459ffc;
    opacity: 0.2;
    border-radius: 50%;
  }
  .dev-status {
    position:absolute;
    // text-align: center;
    // margin-top: 150PX;
    // left: 30PX;
    top: 150PX;
    height: 21PX;
    font-size: 22PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14PX;
    letter-spacing: 0PX;
    // color: $--color-primary;
  }
  .tuxing-left {
    float: left;
    // margin-top: 20PX;
    margin-left: 1%;
    width: 62%;
    // height: 860PX;
    background-color: $--color-white;
    border: solid 1PX $--border-color-lighter;
  }
  .tuxing-right {
    float: left;
    margin-left: 1%;
    width: 35%;
    box-sizing: border-box;
    background-color: $--color-white;
    border: solid 1PX $--border-color-lighter;
    position: relative;
    overflow-x: auto;
  }

  .pattern-status {
    min-height: 200PX;
    margin-left: 20PX;
    margin-top: 20PX;
    margin-right: 20PX;
    margin-bottom: 86PX;
    .overLap{
      width: 100% !important;
    }
  }
  .pattern-name {
    display: inline;
    font-size: 20PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22PX;
    letter-spacing: 0PX;
    color: $--color-text-primary;
  }
  .pattern-message {
    display: inline;
    margin-left: 10PX;
    font-size: 14PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22PX;
    letter-spacing: 0PX;
    color: $--color-text-regular;
  }

  .cross-mess {
    margin-left: 15PX;
    margin-top: 15PX;
    height: 20PX;
    font-size: 20PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 22PX;
    letter-spacing: 0PX;
    color: $--color-text-primary;
  }
  

  .el-tag {
    margin-right: 4PX;
    margin-bottom: 4PX;
  }
  .sloat-icon {
    cursor:pointer;
    margin-top: 15PX;
  }
  .control-time {
    margin-top: 40PX;
    font-size: 30PX;
    font-weight: normal;
    font-stretch: normal;
    line-height: 20PX;
    letter-spacing: 0PX;
    color: $--color-text-primary;
  }
  .control-time .time {
    width: 50%;
    display: inline-block;
    text-align: center;
  }
  .control-time span:first-of-type {
    border-right: 1PX solid #e5e5e5;
  }
  .pattern-explain {
    float: right;
    color: $--color-text-regular;
    .el-checkbox__label {
      font-size: 16PX;
      color: $--color-text-regular;
      font-weight: normal;
      font-stretch: normal;
      line-height: 22PX;
      letter-spacing: 0PX;
    }
  }
 .jsontextarea {
  textarea {
    min-height: 200PX !important;
    max-height:300PX;
  }
 }
 .wenzijiemian {
   .container-left {
     margin-top: 0;
   }
   .container-right {
     margin-top: 0;
   }
 }
}